      /* 样式*/
      /*css初始化*/
      * {
        margin: 0;
        padding: 0; /*清除内外边距 */
      }
      ul {
        list-style: none; /*去掉列表的小点*/
      }
      .clearfix::before,
      .clearfix::after {
        /*清除浮动*/
        display: table;
        content: " ";
      }
      .clearfix:after {
        clear: both;
      }
      .clearfix {
        *zoom: 1;
      }
      .container{   /*版心宽度都是1200 都要居中对齐  所以声明一个公共类 可以使用多类名的方式使用*/
        width: 1200px;
        margin:auto;
      }

      /* css样式初始化结束 */
      
      /* 页面头部 */
      body {
        background-color: #f3f5f7; /*整个页面的背景色*/
      }
      header {
        height: 100px;
        /* background-color: pink; */
        overflow: hidden; /* 防止外边距合并的问题*/
      }
      nav {
        height: 42px;
        width: 1000px;
        /* background-color: purple;   */
        margin: 26px auto; /* 盒子居中对齐  但是这里会遇到上下盒子合并的问题 */
      }
      a {
        color: #050505; /*a链接设置为黑色*/
        text-decoration: none; /*取消链接下划线*/
      }
      .logo {
        float: left;
      }
      .navbar {
        float: left;
        line-height: 42px; /*行高给父亲,因为行高会继承，这个是为了 让首页 课程 职业规划 文字垂直居中显示*/
        margin-left: 50px;
      }
      .navbar li {
        float: left; /*让首页 课程 职业规划一行显示*/
      }
      .navbar li a {
        padding: 0 8px; /*上下0 左右8px*/
        display: block; /*a是行内元素，给高需要转换为块级*/
        height: 42px;
      }
      .navbar li a:hover {
        border-bottom: 2px solid #00a4ff; /*鼠标放底下会显示底边框*/
      }
      /* 搜索框部分 */
      .search {
        width: 410px; /*360+50*/
        height: 38px;
        border: 1px solid #00a4ff;
        float: left;
      }
      .search input[type="text"] {
        /*属性选择器 type为text的文本框*/
        width: 360px;
        height: 38px;

        padding-left: 20px; /*但是这么做会导致盒子被撑开，需要改成css3的盒模型*/
        float: left;
      }
      input {
        border: 0; /*取消表单的边框*/
        box-sizing: border-box; /*改成css3的盒模型 就不会被撑开了*/
        /*css3盒模型会将border和padding都加入到width里面*/
      }
      /*设置 type=submit的文本框*/
      .search input[type="submit"] {
        width: 50px;
        height: 38px;
        float: left; /* 防止被挤下去*/
        background: #00a4ff url(images/search.png) center center no-repeat; /*center水平居中 center垂直居中*/
      }

      /* banner样式设置 */
      .banner{
        height: 420px;
        background-color: #1c036c;
      }
      .banner-in{
        height: 420px;
        background: url(images/banner背景.png) 0 0 no-repeat;
        position: relative; /*子绝父相*/
      }
      .slidebar{
        height: 420px;
        width: 190px;
        background-color: rgba(0,0,0,0.4);
        float: left;
      }
      .slidebar li a{
        color: #fff;
        font-size: 14px;
        padding: 0 20px;
        /*a是行内元素 没有高度需要转换*/
        display:block;
        height:45px;
        line-height: 45px;
      }
      .slidebar li a:hover{
        color:#00a4ff;
      }
      .slidebar a span{
        float:right;
        font-family: Arial; 
      }
      .timetable{
        float: right;
        width: 230px;
        height: 300px;
        background-color: #fff;
        margin-top: 50px;

      }
      .timetable dt{
        height: 50px;
        line-height: 50px;
        background-color: #9bceea;
        color:#fff;
        text-align: center;
        font-weight: 700;
        letter-spacing: 5px;
        margin-bottom: 5px;
      }
      .timetable dd{
        width: 193px;
        height: 60px;
        margin: 0 auto;
        border-bottom:1px solid #cccc;
        padding-top: 12px; /*这里会撑开盒子 改成css3盒子*/
        box-sizing: border-box;

      }
      .timetable dd h4{
        font-size: 16px;
        font-weight: normal;
        color: #4e4e4e;
      }
      .timetable dd p{
        color:#a5a5a5;
        font-size:14px;
      }
      .timetable dd:last-child{/*结构伪类选择器 选择最后一个设置样式*/
        border:0;
      }
      .timetable dd a{
        height: 38px;
        border: 1px solid #00a4ff;
        display: block;
        text-align: center;
        line-height: 38px;
        color:#00a4ff;
        font-weight: 700;
      }
      .timetable dd a:hover{
        background-color: #00a4ff;
        color: #fff;
      }
      /* 小圆点模块 */
      .circle{
        width: 180px;
        height: 22px;
        position: absolute;
        bottom: 10px;
        left:50%;
        margin-left:-90px;
      }
      .circle li{
        float: left;
        width:12px;
        height: 12px;
        background-color:rgba(255, 255, 255, 0.4);
        margin: 6px 8px;
        border-radius: 50%;
      }
      .circle .current{
        width: 19px;
        border-radius:5px;
        background-color: #fff;
      }

      /*banner 结束*/
      /* recommend开始 */
      .recommend{
        height: 60px;
        line-height: 60px;
        background-color: #fff;
        margin-top: 8px;
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
        /* 盒子阴影 水平位置 垂直位置 模糊距离 影子颜色 */
      }
      .recommend a{
        padding: 0 30px;
        border-right: 1px solid #ccc;
      }
      .recommend a:hover{
        color:#00a4ff;
      }
      .recommend a:first-child{
        color:#00a4ff;

      }
      .recommend a:last-child{
        color: #00a4ff;
        border:0;
        float:right;
        font-size:14px;
      }
      .recom-products{
        margin-top:35px;
      }
      .recom-hd{
        height: 40px;
      }
      .recom-hd h4{
        float: left;
        color: #494949;
      }
      .recom-hd a{
        float:right;
        margin-top:10px;
        margin-right:30px;
        font-size:14px;
        color:#a5a5a5;
      }
      .recom-hd a:hover{
        color:#00a4ff;
      }
      .recom-bd ul li{
        width: 228px;
        height: 270px;
        background-color: #fff;
        overflow: hidden;
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
        float: left;
        margin-right: 15px;
        margin-top: 15px;
      }
      .recom-bd ul li:nth-child(5n){
        margin-right: 0;
      }
      .recom-bd li h5, 
      .recom-bd li p{
        padding:0 20px 0 24px;
        margin-top: 12px;
      }
      .recom-bd li h5{
        font-size: 14px;
        line-height:22px;
        font-weight: normal;
      }
      .recom-bd li p{
        font-size:12px;
        color:#999;
      }
      .recom-bd li p span{
        color:#ff7c2d;
      }
      /* 页面底部部分 */

      footer{
        height: 270px;
        background-color: #fff;
        margin-top: 100px;
      }
      .footer-in{
        padding-top: 30px;

      }
      .footer-l{
        float:left;
      }
      .footer-l p{
        font-size: 12px;
        line-height: 18px;
        color: #999;
        margin-top:20px;
      }
      .footer-l a{
        display: block;
        width: 118px;
        height: 33px;
        border: 1px solid #00a4ff;
        font-size:16px;
        color: #00a4ff;
        text-align: center;
        line-height: 33px;
        margin-top: 15px;
      }
      
      .footer-r{
        float: right;
        color: #333;
      }
      .footer-r dl{
        float:left;
        width: 225px;
      }

      .footer-r dt{
        font-size: 16px;
        height: 30px;
      }
      .footer-r dd{
        font-size: 12px;
        height: 20px;
      }
      .footer-r dd a:hover{
        color:#00a4ff;
        text-decoration: underline;
      }


      